<style>
    #allmap {
        width: 100%;
        height: 150vh;
        overflow: hidden;
        margin: 0;
    }
    #btn {
        background-color: dodgerblue;
        color: white;
    }
</style>
<template>
    <div>
        <Row>
            <Card>
                <div>
                    <Input v-model="value">
                    <Label slot="prepend">车牌号码</Label>
                    <Button id="btn" slot="append" icon="ios-search">搜索</Button>
                    </Input>
                </div>
                <div id="allmap"></div>
            </Card>
        </Row>
    </div>
</template>
<script type="text/ecmascript-6">
    import api from '@/libs/util';
    export default {
        data () {
            return {
                value:'',
            }
        },
        mounted() {
            /*引入百度地图*/
            var map = new BMap.Map("allmap", {enableMapClick: true});    // 创建Map实例,并关闭底图可点功能
            map.centerAndZoom(new BMap.Point(120.757278, 30.758204), 15);  // 初始化地图,设置中心点坐标和地图级别
            map.setCurrentCity("嘉兴");          // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

            var navigationControl = new BMap.NavigationControl({
                // 靠左上角位置
                anchor: BMAP_ANCHOR_TOP_LEFT,
                // LARGE类型
                type: BMAP_NAVIGATION_CONTROL_LARGE,
                // 启用显示定位
                enableGeolocation: true // 会多出一个点
            });
            map.addControl(navigationControl);

            /*添加定位控件*/
            var geolocationControl = new BMap.GeolocationControl({
                    // 靠右上角位置
                    anchor: BMAP_ANCHOR_BOTTOM_LEFT,
                }
            );
            geolocationControl.addEventListener("locationSuccess", function(e){
                // 定位成功事件
                var address = '';
                address += e.addressComponent.province;
                address += e.addressComponent.city;
                address += e.addressComponent.district;
                address += e.addressComponent.street;
                address += e.addressComponent.streetNumber;
                alert("当前定位地址为：" + address);
            });
            geolocationControl.addEventListener("locationError",function(e){
                // 定位失败事件
                alert(e.message);
            });
            map.addControl(geolocationControl);
            map.enableKeyboard(true);//启动键盘操作

            /*绘制围栏*/
            var styleOptions = {
                strokeColor:"red",    //边线颜色。
                fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
                strokeWeight: 3,       //边线的宽度，以像素为单位。
                strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
                fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
                strokeStyle: 'solid' //边线的样式，solid或dashed。
            }
            //实例化鼠标绘制工具
            var drawingManager = new BMapLib.DrawingManager(map, {
                isOpen: false, //是否开启绘制模式
                enableDrawingTool: true, //是否显示工具栏
                drawingToolOptions: {
                    anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                    offset: new BMap.Size(5, 5), //偏离值
                },
                circleOptions: styleOptions, //圆的样式
                polylineOptions: styleOptions, //线的样式
                polygonOptions: styleOptions, //多边形的样式
                rectangleOptions: styleOptions //矩形的样式
            });

            /*规划路线*/
            var p1 = new BMap.Point(120.757278, 30.778204);    //起点
            var p2 = new BMap.Point(120.787532, 30.785827);    //终点
            var Icon = new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52,26), {    //小车图片
                anchor : new BMap.Size(27, 13),
            });
            var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});    //驾车实例
            driving2.search(p1, p2);    //显示一条公交线路

            window.run = function (){
                var driving = new BMap.DrivingRoute(map);    //驾车实例
                driving.search(p1, p2);
                driving.setSearchCompleteCallback(function(){
                    var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
                    var paths = pts.length;    //获得有几个点

                    var carMk = new BMap.Marker(pts[0],{icon:Icon});
                    map.addOverlay(carMk);
                    var i=0;
                    function resetMkPoint(i){
                        carMk.setPosition(pts[i]);
                        if(i < paths){
                            setTimeout(function() {
                                i++;
                                resetMkPoint(i);
                            },100);
                        }
                    }
                    setTimeout(function() {
                        resetMkPoint(5);
                    },100)
                });
            };
            setTimeout(function() {
                run();
            },1500);

            /*创建标图*/
            var pt = new BMap.Point(120.787532, 30.782227);
            var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
            var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
            map.addOverlay(marker2);              // 将标注添加到地图中

            /*添加弹框*/
            var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                '报警类型：<br/>报警时间：<br/>报警因子：' +
                '</div>';
            //创建检索信息窗口对象
            var searchInfoWindow = null;
            searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
                title  : "报警信息",      //标题
                width  : 290,             //宽度
                height : 105,              //高度
                panel  : "panel",         //检索结果面板
                enableAutoPan : true,     //自动平移
                enableSendToPhone: false,//去除手机图标
                searchTypes: []
            });
            marker2.addEventListener("click", function(e){
                searchInfoWindow.open(marker2);
            });
            map.addOverlay(this.marker2); //在地图中添加marker
            /*圆*/
            var circle = new BMap.Circle(pt,500,{strokeColor:"red"});
            map.addOverlay(circle);            //增加圆
            var result = BMapLib.GeoUtils.isPointInCircle(p1,circle);
            console.log(result);

            /*多边形*/
            var pt1 = new BMap.Point(120.787532, 30.799227);
            var polygon = new BMap.Polygon([
                new BMap.Point(120.755278, 30.774204),
                new BMap.Point(120.755278, 30.784227),
                new BMap.Point(120.775278, 30.789227),
                new BMap.Point(120.788532, 30.789827),
                new BMap.Point(120.785532, 30.770827),
            ], {strokeColor:"red", strokeWeight:5, strokeOpacity:0.5});  //创建多边形
            map.addOverlay(polygon);            //增加多边形
            var result1 = BMapLib.GeoUtils.isPointInPolygon(pt1, polygon);
            console.log(result1);
        },
        methods: {

        }
    }
</script>
